<template>
	<div class="settings-card-item flex rounded-lg" :class="wrap ? 'flex-wrap' : ''">
		<div :class="prefixClass"><slot name="prefix" /></div>
		<div class="flex flex-col flex-auto" :class="titleClass">
			<BaseText :text="title" :textT="titleT" />
			<BaseText class="mt-1 text-t-3" :text="subtitle" :textT="subtitleT" />
		</div>
		<div v-if="wrap" class="w-full h-1" />
		<div :class="[suffixClass, wrap ? 'w-full' : '']"><slot name="suffix" /></div>
	</div>
</template>

<script setup lang="ts">
import { BaseText } from '@/components/base'

defineProps({
	title: [String, Number],
	titleT: [String, Array],
	subtitle: [String, Number],
	subtitleT: [String, Array],
	prefixClass: [String, Array, Object],
	titleClass: [String, Array, Object],
	suffixClass: [String, Array, Object],
	wrap: Boolean
})
</script>

<style scoped></style>
